<template>
  <div>
    <div id="navbar">
      <div class="lww_header">
        <div class="header_wrap">
          <div class="header_logo">
            <a href="javascript:;" class="lww_logo"></a>
          </div>
          <ul class="header_nav">
            <li name="index" @click="$router.push('/')"><a>首页</a></li>
            <li name="destination" @click="$router.push('/destination')">
              <a>目的地</a>
            </li>
            <li
              name="strategy"
              class="header_nav_active"
              @click="$router.push('/strategy')"
            >
              <a>旅游攻略</a>
            </li>
            <li name="travel"><a href="./travel_index.html">旅游日记</a></li>
            <li name="">
              <a href="javascript:;">去旅行<i class="icon_caret_down"></i></a>
            </li>
            <li name="">
              <a href="javascript:;">社区<i class="icon_caret_down"></i></a>
            </li>
          </ul>
          <div class="header_search">
            <input type="text" />
            <a class="icon_search"></a>
          </div>
          <div class="login_info" v-show="loginState">
            <div class="head_user">
              <a href="./index.html">
                <img
                  src="../../assets/images/default.jpg"
                  id="login_user_headUrl"
                />
                <i class="icon_caret_down"></i>
                <a @click="delLoginState">退出登陆</a>
              </a>
            </div>
            <div class="header_msg">消息<i class="icon_caret_down"></i></div>
            <div class="header_daka">
              <a href="javascript:;">打卡</a>
            </div>
          </div>
          <div class="login-out" v-show="!loginState">
            <a
              class="weibo-login"
              href="./strategy_detail.html?id=5e33bd2a9c300000e9003ae3#"
              title="微博登录"
              rel="nofollow"
            ></a>
            <a
              class="qq-login"
              href="./strategy_detail.html?id=5e33bd2a9c300000e9003ae3#"
              title="QQ登录"
              rel="nofollow"
            ></a>
            <a
              class="weixin-login"
              href="./strategy_detail.html?id=5e33bd2a9c300000e9003ae3#"
              title="微信登录"
              rel="nofollow"
            ></a>
            <a
              id="_j_showlogin"
              title="登录骡窝窝"
              rel="nofollow"
              @click="$router.push('/login')"
              >登录</a
            >
            <span class="split">|</span>
            <a href="./regist.html" title="注册帐号" rel="nofollow">注册</a>
          </div>
        </div>
        <div class="shadow"></div>
      </div>
    </div>
    <div id="app" class="wrap clearfix">
      <div class="local-con clearfix">
        <div class="sideL">
          <div class="l-topic">
            <h1>{{ strategiesDetailData.title }}</h1>
            <div class="sub-tit">
              <i class="i-zan"></i>
              51人体验过
              <span class="time" style="margin-left: 20px"
                ><em>阅读{{ strategiesDetailData.viewnum }}</em></span
              >
              <span class="time"
                >旅游攻略<em>{{
                  strategiesDetailData.createTime | dateFormat
                }}</em></span
              >
            </div>
            <div class="user_list">
              <div class="clearfix">
                <div class="author">
                  <a href="javascript:;" target="_blank"
                    ><img
                      srcsrc="../../assets/images/wKgEaVy2nheAN9y5AAorszCM1vQ56.jpeg"
                      alt=""
                      width="90"
                      height="90"
                  /></a>
                </div>
                <div class="info">
                  <div class="in-t">
                    <a href="javascript:;" target="_blank"
                      ><span class="name">叩丁狼官方</span></a
                    >
                    <span class="more">6篇游记 429个粉丝</span>
                  </div>
                  <p>
                    人有欢乐，也有苦衷。所谓的完美，其实只是来源于我们的心灵。人生不能重新来过，每个人也不可能重复站在同一个路口。但请不要害怕选择，因为选择没有绝对的好与坏，每种选择都会为你带来一种不一样的感受和别样的精彩。
                  </p>
                </div>
                <div class="contact user-home">
                  <a href="javascript:;" target="_blank"
                    ><i></i>
                    <p>TA的窝</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="l-topic">
            <div class="_j_content" v-html="strategiesDetailData.content"></div>
          </div>
          <div class="copyRight m_t_20">
            <p style="text-align: left">
              本文著作权归 骡窝窝 所有，任何形式转载请联系作者。©2019
              骡窝窝自由行
              <a
                class="r-report"
                style="display: inline; float: right; color: rgb(153, 153, 153)"
                >举报</a
              >
            </p>
          </div>
          <div class="l-comment">
            <div class="clearfix com-form">
              <div class="img">
                <img
                  src="../../assets/images/wKgED1uqIreAU9QZAAAXHQMBZ74008.png"
                />
              </div>
              <div class="fm-tare user-log">
                <textarea
                  id="content"
                  class="_j_comment_content"
                  v-model="addCommentValue"
                ></textarea>
                <button
                  type="button"
                  class="_j_save_comment"
                  @click="addComment"
                >
                  评论
                </button>
              </div>
            </div>
            <div id="strategyComment" class="com-box">
              <h2>
                评论（<span class="_comment_num">{{
                  StrategiesDetailCommentsData.totalElements
                }}</span
                >）
              </h2>
              <ul id="comments">
                <li
                  class="clearfix comment_item"
                  v-for="item in StrategiesDetailCommentsData.content"
                  :key="item.id"
                >
                  <div class="img">
                    <img src="../../assets/images/default.jpg" />
                  </div>
                  <div class="info">
                    <h3>{{ item.nickname }}</h3>
                    <h4>{{ item.createTime | dateFormat }}</h4>
                    <div class="com-cont">{{ item.content }}</div>
                    <div class="rep-del hide" style="display: block">
                      <i></i> <a role="button" class="reply-report">举报 </a>
                      <i></i> <span class="_j_comment_like_num">0</span>&nbsp;
                      <a
                        href="javascript:;"
                        class="btn-comment-like _j_like_comment_btn like"
                      ></a>
                    </div>
                  </div>
                </li>
                <div style="float: right">
                  <div style="float: left">
                    <span style="line-height: 30px">
                      共{{ StrategiesDetailCommentsData.totalPages }}页 /第
                      {{ CommentsPage }}页&nbsp;&nbsp;&nbsp;</span
                    >
                  </div>
                  <div
                    id="pagination"
                    class="jq-pagination"
                    style="display: inline"
                  >
                    <a
                      class="prev"
                      href="javascript:void(0);"
                      jp-role="prev"
                      jp-data="0"
                      @click="changeCurrentPage(-1)"
                      >上一页</a
                    ><a
                      class="next"
                      href="javascript:void(0);"
                      jp-role="next"
                      jp-data="2"
                      @click="changeCurrentPage(1)"
                      >下一页</a
                    ><a
                      class="last disabled"
                      href="javascript:void(0);"
                      jp-role="last"
                      jp-data="1"
                      >尾页</a
                    >
                  </div>
                </div>
              </ul>
            </div>
          </div>
        </div>
        <div class="sideR">
          <div class="side_inner _j_sticky_block">
            <div class="_j_other_column">
              <div class="bar-sar clearfix">
                <a href="javascript:;" title="评论" class="_j_goto_comment"
                  ><i class="i01"></i
                  ><em class="replay_num">{{
                    strategiesDetailData.replynum
                  }}</em></a
                >
                <div class="bs_collect">
                  <a
                    href="javascript:void(0);"
                    title="收藏"
                    class="bs_btn btn-collect"
                    ><i class="collect_icon i02"></i>
                    <em class="favorite_num">{{
                      strategiesDetailData.favornum
                    }}</em></a
                  >
                </div>
                <div class="bs_share">
                  <a href="javascript:;" title="分享" class="btn-share bs_btn"
                    ><i class="i03"></i
                    ><em>{{ strategiesDetailData.sharenum }}</em></a
                  >
                </div>
                <a href="javascript:;" title="顶" class="_j_support_btn"
                  ><i class="i05"></i
                  ><em class="support_num">{{
                    strategiesDetailData.thumbsupnum
                  }}</em></a
                >
              </div>
              <div class="bs_pop clearfix" style="display: none">
                <a
                  title="分享到新浪微博"
                  rel="nofollow"
                  role="button"
                  data-japp="sns_share"
                  data-jappfedata=""
                  data-key="wb"
                  data-title="盘点 | 广州周边好玩的地方有哪些？"
                  data-content="盘点 | 广州周边好玩的地方有哪些？"
                  data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                  data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html"
                  class="sina"
                ></a>
                <a
                  title="分享到QQ空间"
                  rel="nofollow"
                  role="button"
                  data-japp="sns_share"
                  data-jappfedata=""
                  data-key="qz"
                  data-title="盘点 | 广州周边好玩的地方有哪些？"
                  data-content="盘点 | 广州周边好玩的地方有哪些？"
                  data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                  data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html"
                  class="zone"
                ></a>
                <a
                  title="分享到微信"
                  rel="nofollow"
                  role="button"
                  data-japp="weixin_dialog_share"
                  data-jappfedata=""
                  data-wx_qr="http://www.mafengwo.cn/qrcode.php?text=https%3A%2F%2Fm.mafengwo.cn%2Fgonglve%2Fziyouxing%2F1775.html&amp;size=150&amp;eclevel=H&amp;logo=&amp;__stk__=d3c9fd1d23b028a45ec5b71a30324cb9_391fafc14c22754068d1543e8cfc5d04"
                  data-detail="1775"
                  class="weixin"
                ></a>
              </div>
            </div>
          </div>
          <div class="side-sales">
            <h3>本周热卖</h3>
            <ul>
              <li>
                <a href="javascript:;" target="_blank"
                  ><span class="image"
                    ><img
                      src="../../assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
                  /></span>
                  <div
                    title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                    class="title"
                  >
                    广州长隆野生动物世界门票 随买随用 ／广州...
                  </div>
                  <span class="price">¥260</span>
                </a>
              </li>
              <li>
                <a href="javascript:;" target="_blank"
                  ><span class="image"
                    ><img
                      src="../../assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
                  /></span>
                  <div
                    title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                    class="title"
                  >
                    广州长隆欢乐世界门票 当天可买／广州长隆旅...
                  </div>
                  <span class="price">¥187</span>
                </a>
              </li>
              <li>
                <a href="javascript:;" target="_blank"
                  ><span class="image"
                    ><img
                      src="../../assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
                  /></span>
                  <div
                    title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                    class="title"
                  >
                    当天可订/广州长隆野生动物世界门票/长隆野生...
                  </div>
                  <span class="price">¥256</span>
                </a>
              </li>
              <li>
                <a href="javascript:;" target="_blank"
                  ><span class="image"
                    ><img
                      src="../../assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
                  /></span>
                  <div
                    title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                    class="title"
                  >
                    广州长隆水上乐园门票 一票通玩（电子票／当地...
                  </div>
                  <span class="price">¥122</span>
                </a>
              </li>
              <li>
                <a href="javascript:;" target="_blank"
                  ><span class="image"
                    ><img
                      src="../../assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
                  /></span>
                  <div
                    title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                    class="title"
                  >
                    寻味广州1日游（6人小团·探黄埔军校陈家祠·...
                  </div>
                  <span class="price">¥288</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" id="footer">
      <div class="ft-content" style="width: 1105px">
        <div class="ft-info clearfix">
          <dl class="ft-info-col ft-info-intro">
            <dt>骡窝窝旅游网</dt>
            <dd>
              叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及
            </dd>
            <dd>
              意见咨询服务的教育科技公司，为您提供海量优质课程，以及创新的线上线下学
            </dd>
            <dd>习体验，帮助您获得全新的个人发展和能力提升。</dd>
          </dl>
          <dl class="ft-info-col ft-info-qrcode">
            <dd>
              <span class="ft-qrcode-tejia"></span>
            </dd>
            <dd>
              <span class="ft-qrcode-weixin"></span>
            </dd>
            <dd>
              <span
                class="ft-qrcode-weixin"
                style="background-image: url(./images/qrcode.jpg)"
              ></span>
            </dd>
          </dl>
          <dl class="ft-info-social">
            <dt>向崇尚自由的加勒比海盗致敬！</dt>
            <dd>
              <a
                class="ft-social-weibo"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qqt"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qzone"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
            </dd>
          </dl>
        </div>

        <div class="ft-links">
          <a target="_blank" href="http://china.makepolo.com/">马可波罗</a
          ><a target="_blank" href="http://www.onlylady.com/">Onlylady女人志</a
          ><a target="_blank" href="http://trip.elong.com/">艺龙旅游指南</a
          ><a target="_blank" href="http://www.cncn.com/">欣欣旅游网</a>
          <a target="_blank" href="http://www.8264.com/">户外运动</a
          ><a target="_blank" href="http://www.yue365.com/">365音乐网</a
          ><a target="_blank" href="http://ishare.iask.sina.com.cn/"
            >爱问共享资料</a
          ><a target="_blank" href="http://www.uzai.com/">旅游网</a>
          <a target="_blank" href="http://www.zongheng.com/">小说网</a>
          <a target="_blank" href="http://www.xuexila.com/">学习啦</a
          ><a target="_blank" href="http://www.yododo.com/">游多多自助游</a
          ><a target="_blank" href="http://www.zhcpic.com/">问答</a
          ><a target="_blank" href="http://huoche.mafengwo.cn/">火车时刻表</a>
          <a target="_blank" href="http://www.lvmama.com/">驴妈妈旅游网</a>
          <a target="_blank" href="http://www.haodou.com/">好豆美食网</a
          ><a target="_blank" href="http://www.taoche.com/">二手车</a
          ><a target="_blank" href="http://www.lvye.cn/">绿野户外</a
          ><a target="_blank" href="http://www.tuniu.com/">途牛旅游网</a>
          <a target="_blank" href="http://www.mapbar.com/">图吧</a>
          <a target="_blank" href="http://www.chnsuv.com/">SUV联合越野</a
          ><a target="_blank" href="http://www.uc.cn/">手机浏览器</a
          ><a target="_blank" href="http://sh.city8.com/">上海地图</a
          ><a target="_blank" href="http://www.tianqi.com/">天气预报查询</a>
          <a target="_blank" href="http://www.ly.com/">同程旅游</a>
          <a target="_blank" href="http://www.tieyou.com/">火车票</a
          ><a target="_blank" href="http://www.yunos.com/">YunOS</a
          ><a target="_blank" href="http://you.ctrip.com/">携程旅游</a
          ><a target="_blank" href="http://www.jinjiang.com/">锦江旅游</a>
          <a target="_blank" href="http://www.huoche.net/">火车时刻表</a>
          <a target="_blank" href="http://www.tripadvisor.cn/">TripAdvisor</a
          ><a target="_blank" href="http://www.tianxun.com/">天巡网</a
          ><a target="_blank" href="http://www.mayi.com/">短租房</a
          ><a target="_blank" href="http://www.zuzuche.com/">租租车</a>
          <a target="_blank" href="http://www.5fen.com/">五分旅游网</a>
          <a target="_blank" href="http://www.zhuna.cn/">酒店预订</a
          ><a target="_blank" href="http://www.ailvxing.com/">爱旅行网</a
          ><a target="_blank" href="http://360.mafengwo.cn/all.php">旅游</a
          ><a target="_blank" href="http://vacations.ctrip.com/">旅游网</a>
          <a target="_blank" href="http://www.wed114.cn/">wed114结婚网</a>
          <a target="_blank" href="http://www.chexun.com/">车讯网</a
          ><a target="_blank" href="http://www.aoyou.com/">遨游旅游网</a
          ><a target="_blank" href="http://www.91.com/">手机</a>
          <a href="javascript:;" target="_blank">更多友情链接&gt;&gt;</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  StrategiesDetailAPI,
  StrategiesDetailCommentsAPI,
  StrategiesAddCommentAPI,
} from "@/request/api";
import { mapState, mapMutations } from "vuex";
export default {
  async created() {
    // 攻略详情数据
    let res = await StrategiesDetailAPI(this.$route.query.id);
    // console.log("攻略详情的数据", res.data);
    this.strategiesDetailData = res.data;
    console.log("res", res);
    // 查询评论
    let res2 = await StrategiesDetailCommentsAPI(
      this.CommentsPage,
      this.$route.query.id
    );
    console.log("res2", res2);
    this.StrategiesDetailCommentsData = res2.data;
    console.log("res2", this.StrategiesDetailCommentsData);
  },
  data() {
    return {
      strategiesDetailData: [], //略详情数据
      StrategiesDetailCommentsData: [], //查询评论
      // 评论内容
      addCommentValue: "",
      CommentsPage: 1,
    };
  },
  computed: {
    ...mapState({
      loginState: (state) => state.loginState.loginState,
    }),
  },
  methods: {
    ...mapMutations({
      // 登录状态的方法
      changeLoginState: "loginState/changeLoginState",
      delLoginState: "loginState/delLoginState",
    }),

    async addComment() {
      // 添加评论
      await StrategiesAddCommentAPI({
        content: this.addCommentValue,
        strategyId: this.$route.query.id,
        strategyTitle: null,
      });
      // 数据实时刷新，重新发一次请求，
      let res2 = await StrategiesDetailCommentsAPI({}, this.$route.query.id);
      this.StrategiesDetailCommentsData = res2.data;
      this.addCommentValue = "";
    },
    async changeCurrentPage(num) {
      // 优化用户提示
      // 提示用户已经到了最新一页
      if (this.CommentsPage === 1 && num === -1) {
        alert("已经是最新一页了");
        return;
      }
      //提示用户已经到了最后一页
      if (
        this.CommentsPage === this.StrategiesDetailCommentsData.totalPages &&
        num === 1
      ) {
        alert("已经到最后一页了");
        return;
      }
      this.CommentsPage = this.CommentsPage + num;
      let res = await StrategiesDetailCommentsAPI(
        this.CommentsPage,
        this.$route.query.id
      );
      this.StrategiesDetailCommentsData = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/strategyDetail.less";
@import "@/assets/css/jqPagination.less";
</style>
